
<template>
  <div class="wrap" style="padding: 15px">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <!-- <el-form-item label="核销时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="卡名称">
          <el-input
            clearable
            v-model="queryParams.cardName"
            placeholder="卡名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡类型">
          <el-select
            clearable
            v-model="queryParams.cardType"
            placeholder="卡类型"
          >
            <el-option label="单次卡" value="1"> </el-option>
            <el-option label="门票" value="2"> </el-option>
            <el-option label="计次卡" value="3"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="卡名称" prop="cardName"></el-table-column>
      <el-table-column label="卡类型">
        <template slot-scope="scope">
          {{ setCardTypeTxt(scope.row.cardType) }}
        </template>
      </el-table-column>
      <el-table-column label="售卖张数" prop="count"></el-table-column>
      <el-table-column label="核销次数" prop="usedSum"></el-table-column>
    </el-table>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="getData"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { saleCardWrite } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
  components: {

  },
  data () {
    return {
      date: [],
      queryParams: {
        startTimeStr: undefined,
        endTimeStr: undefined,
        cardType: undefined,
        cardName: undefined,

        page: 1,
        pageSize: 10,
      },
      tableData: [

      ],
      total: 0,
      loading: false,

    };
  },

  created () {
    this.getData()
  },
  methods: {
    getDate (e) {
      if (e) {
        this.queryParams.startTimeStr = e[0]
        this.queryParams.endTimeStr = e[1]
      } else {
        this.queryParams.startTimeStr = ""
        this.queryParams.endTimeStr = ""
      }

    },
    // 新增
    show (id) {
      this.$refs.detail.show(id)
    },
    setCardTypeTxt (cardType) {
      let str = ""
      switch (cardType) {
        case "1":
          str = "单次卡"
          break;
        case "2":
          str = "门票"
          break;
        case "3":
          str = "计次卡"
          break;

      }
      return str;
    },
    getData () {
      saleCardWrite(this.queryParams).then(res => {

        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },

    search () {
      this.queryParams.page = 1
      this.getData()
    }
  },
};
</script>
